<script setup lang="ts">
import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";

defineProps({
  model: Object,
  rules: Object,
})
defineEmits(['onSearch', 'onReset'])

const showSearchCategory = ref(false)

const slots = useSlots()
// 判断当前组件是否含有具名插槽
const hasShowAdvancedSearch = ref(!!slots.showAdvancedSearch)

</script>

<template>
  <el-form :model="model" :rules="rules">
    <el-row :gutter="20">

      <slot></slot>

      <template v-if="showSearchCategory">
        <slot name="showAdvancedSearch"></slot>
      </template>

      <el-col :span="8" :offset="showSearchCategory ? 0 : 8">
        <div flex justify-end items-center>
          <el-button type="primary" @click="$emit('onSearch')">搜索</el-button>
          <el-button plain @click="$emit('onReset')">重置</el-button>

          <el-button type="primary" text v-if="hasShowAdvancedSearch" @click="showSearchCategory = !showSearchCategory">
            {{ showSearchCategory ? '收起' : '展开' }}
            <el-icon>
              <ArrowUp v-if="showSearchCategory"/>
              <ArrowDown v-else/>
            </el-icon>
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped>

</style>